<template>
<!-- 泵 -->
  <div class="pumpBox">
  <el-card class="box-card"
           style="margin-left: 5px;width: 1120px">
    <!--表格区域-->
    <template>
      <el-table
        type="border-card"
        :data="tableData"
        border
        max-height="400"
        style="width: 1100px;margin-left: 0px">
        <el-table-column
          prop="name"
          label="泵名称"
          width="80">
        </el-table-column>
        <el-table-column
          prop="ratedSpeed"
          label="额定转速"
          width="100">
        </el-table-column>
        <el-table-column
          prop="ratedPower"
          label="额定功率"
          width="100">
        </el-table-column>
        <el-table-column
          prop="speedAtBEP"
          label="最优转速"
          width="100">
        </el-table-column>
        <el-table-column
          prop="flowAtBEP"
          label="最优流量"
          width="100">
        </el-table-column>
        <el-table-column
          prop="headAtBEP"
          label="最优扬程"
          width="100">
        </el-table-column>
        <el-table-column
          prop="powerAtBEP"
          label="最优功率"
          width="100">
        </el-table-column>
        <el-table-column
          label="扬程-流量曲线"
          width="120">
          <template slot-scope="scope">
            <el-button size="small" @click="showCurve(scope.row)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="180">
          <template slot-scope="scope">
            <el-button size="small" type="primary"  @click="showEditView(scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <!--弹出扬程-流量曲线区域-->
    <el-dialog
      title="查看扬程-流量曲线"
      :visible.sync="dialogVisible" width="55%">
      <el-form ref="form" label-width="100px" style="height: 500px;width: 1000px">
        <el-form-item label="泵名称:">
          <span>{{updateTableData.name}}</span>
        </el-form-item>
        <div style="margin-bottom: 10px;margin-left: 40px">
          <el-button size="small" @click="drawCurve">绘图</el-button>
        </div>
        <!--扬程-流量参数输入表-->
        <el-row style="margin-left: 40px">
          <el-col :span="8"><HotTable ref="testHot" :settings="hotSettings"></HotTable></el-col>
          <el-col :span="16"><ve-line :data="chartData"></ve-line></el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </el-card>
</div>
</template>

<script>
  import { HotTable } from "@handsontable/vue";
  import "handsontable/dist/handsontable.full.css";
  export default {
    name:'pump',
    components: { HotTable,},
    data () {
      return {
        form:'',
        dialogVisible:false,
        pumpData:'',
        tableData: [
          {
            id: '1',
            name: '泵1',
            ratedPower:'',
            ratedSpeed:'',
            speedAtBEP:'',
            flowAtBEP:'',
            headAtBEP:'',
            powerAtBEP:'',
          },{
            id: '2',
            name: '泵2',
            ratedPower:'',
            ratedSpeed:'',
            speedAtBEP:'',
            flowAtBEP:'',
            headAtBEP:'',
            powerAtBEP:'',
          },{
            id: '3',
            name: '泵3',
            ratedPower:'',
            ratedSpeed:'',
            speedAtBEP:'',
            flowAtBEP:'',
            headAtBEP:'',
            powerAtBEP:'',
          }],
        updateTableData:{
          id: '',
          name: '123',
          ratedPower:'',
          ratedSpeed:'',
          speedAtBEP:'',
          flowAtBEP:'',
          headAtBEP:'',
          powerAtBEP:'',
        },

        /*杨程曲线表参数*/
        root: "test-hot",
        hotSettings: {
          licenseKey:'non-commercial-and-evaluation',
          data: [
            //数据可以是二维数组，也可以是数组对象
            { '扬程': '0', '流量': '0'},
            { '扬程': '20', '流量': '35'},
            { '扬程': '40', '流量': '65'},
            { '扬程': '60', '流量': '85'},
            { '扬程': '80', '流量': '95'},
            { '扬程': '100', '流量': '100'},
          ],
          startCols: 2,
          minRows: 5, //最小行列
          fixedColumnsLeft:2, //固定左侧多少列不能水平滚动
          rowHeaders: true, //行表头，可以使布尔值（行序号），可以使字符串（左侧行表头相同显示内容，可以解析html），也可以是数组（左侧行表头单独显示内容）。
          colHeaders: ["扬程", "流量"], //自定义列表头or 布尔值
          colWidths:[100,100],//[列宽1，列宽2，...]/列宽值
          // minSpareCols: 2, //列留白
          // minSpareRows: 2, //行留白
          currentRowClassName: "currentRow", //为选中行添加类名，可以更改样式
          currentColClassName: "currentCol", //为选中列添加类名
          autoWrapRow: true, //自动换行
          contextMenu: {
            items: {
              row_above: {
                name: "上方插入一行",
              },
              row_below: {
                name: "下方插入一行",
              },
              hsep1: "---------", //提供分隔线
              remove_row: {
                name: "删除行",
              },
            },
          }, //右键效果
          fillHandle: true, //选中拖拽复制 possible values: true, false, "horizontal", "vertical"
          fixedColumnsLeft: 0, //固定左边列数
          fixedRowsTop: 0, //固定上边列数
          columns: [
            //添加每一列的数据类型和一些配置
            {  data: '扬程',type: "text" }, //数值
            { data: '流量', type: "numeric",}, //指定的数据格式
          ],
          afterChange: function (changes, source) {
            //数据改变时触发此方法
            console.log(this.getSourceData());
          },
        },
        /*绘图数据*/
        chartData: {
          columns: ['扬程', '流量'],
          rows: []
        },
      }
    },

    methods: {
      drawCurve(){
        this.chartData.rows = this.hotSettings.data;
      },
      showCurve(row){
        this.dialogVisible = true;
        Object.assign(this.updateTableData,row);
        console.log(this.updateTableData);
      },
      showEditView(index, row) {
        console.log('成功了1！！！'+index, row);
        console.log('成功了2！！！'+row.name);
      },
      handleDelete(index, row) {
        console.log(index, row);
      },
    },
  }
</script>
<style>

</style>
